<template>
	<el-dialog title="申请退款" :visible.sync="isShow" :close-on-click-modal="false" :before-close="close" width="1000px">
		<div class="form-box">
			<el-form ref="form" :model="item" label-width="110px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="订单编号" prop="orderNo">
							<el-input v-model="item.orderNo" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="会员账号" prop="userPhone">
							<el-input v-model="item.userPhone" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="12">
						<el-form-item label="订单金额(元)" prop="orderAmount">
							<el-input :value="forMoney(item.orderAmount)" readonly></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="消费券金额" prop="userPhone">
							<el-input :value="forCoupon(item.couponAmount)" readonly></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row>
					<el-col :span="24">
						<el-form-item label="退款说明" prop="refundReason">
							<el-input type="textarea" :rows="5" v-model="refundReason" placeholder="请输入退款原因或备注"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		
		<div style="padding: 20px;">
			<h3 style="margin-bottom: 14px;">订单明细</h3>
			<el-table :data="detailsTableData" stripe border style="width: 100%">
				<el-table-column label="商品信息">
					<template slot-scope="scope">
						<div class="sku-info">
							<div class="sku-image">
								<el-image style="width: 80px; height: 80px;" :src="scope.row.thumbImage"></el-image>
							</div>
							<div class="sku-details">
								<h3>{{scope.row.productName}}</h3>
								<p>{{scope.row.productSkuName}}</p>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="数量" prop="quantity" width="90"></el-table-column>
				<el-table-column label="单位" prop="unitName" width="90"></el-table-column>
				<el-table-column label="零售单价" width="110">
					<template slot-scope="scope">
						¥{{scope.row.price}}
					</template>
				</el-table-column>
				<el-table-column v-if="item.isMemberPay ==1" label="会员单价" width="110">
					<template slot-scope="scope">
						¥{{scope.row.memberPrice}}
					</template>
				</el-table-column>
				<el-table-column v-if="item.isMemberPay ==1" label="消费券" width="110">
					<template slot-scope="scope">
						¥{{scope.row.memberCoupon}}
					</template>
				</el-table-column>
				<el-table-column v-if="item.isMemberPay ==1" label="消费券小计" width="110">
					<template slot-scope="scope">
						¥{{scope.row.couponAmountSubtotal}}
					</template>
				</el-table-column>
				<el-table-column v-if="item.isMemberPay ==1" label="金额小计" width="120">
					<template slot-scope="scope">
						¥{{scope.row.memberPriceSubtotal}}
					</template>
				</el-table-column>
				<el-table-column v-if="item.isMemberPay ==0" label="金额小计" width="120">
					<template slot-scope="scope">
						¥{{scope.row.orderAmount}}
					</template>
				</el-table-column>
			</el-table>
		</div>
		
		<div slot="footer">
			<el-button type="warning" :loading="isLoading" @click="submit">{{isLoading ? '退款处理中，请稍后' : '确认申请退款'}}</el-button>
			<el-button @click="close">关 闭</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import { queryOrderDetailByOrderId, OrderRefundSubmit, OrderRefundInfo } from '@api/order/order'
	import dayjs from 'dayjs'
	export default {
		props: {
			isShow: Boolean,
			item: Object,
		},
		data() {
			return {
				detailsTableData: [],
				refundReason: '',
				isLoading: false,
			}
		},
		watch: {
			isShow(val) {
				if(val) {
					this.getDetail();
				}
			}
		},
		methods: {
			getDetail() { // 获取详情
				queryOrderDetailByOrderId({
					orderId: this.item.id 
				})
					.then(res => {
						this.detailsTableData = res.data.details;
					})
			},
			forDate(val) { //时间格式化
				return dayjs(val).format('YYYY-MM-DD HH:mm:ss');
			},
			forMoney(val) {
				let money = val == null ? '0.00' : val.toFixed(2);
				return money;
			},
			forCoupon(val) {
				let money = val == null || val == 0 ? '-' : val + '元券';
				return money;
			},
			
			submit() { //提交退款
				if(this.isLoading) {
					return;
				}
				this.isLoading = true;
				
				OrderRefundSubmit({
					orderNo: this.item.orderNo,
					refundReason: this.refundReason
				})
					.then(() => {
						this.$message.success('退款提交成功！');
						
						setTimeout(() => {
							this.checkRefund();
						}, 600);
					})
					.catch(() => {
						this.isLoading = false;
					})
			},
			checkRefund() { //查询退款结果
				OrderRefundInfo({orderNo: this.item.orderNo})
					.then(() => {
						this.$message.success('订单退款成功！');
						this.isLoading = false;
						
						this.$emit('submit');
						this.close();
					})
			},
			
			close() {
				this.$emit('close');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sku-info {
		width: 100%;
		display: flex;
		.sku-image {
			width: 80px;
			height: 80px;
			flex: 0 0 80px;
		}
		.sku-details {
			flex: 1 1 auto;
			h3 {
				font-size: 14px;
				color: #333;
				padding-left: 30px;
			}
			p {
				font-size: 14px;
				color: #999;
				margin-top: 4px;
				padding-left: 30px;
			}
		}
	}
</style>